<script setup lang="ts">
//使用hooks在界面引入已经写好的功能
import useLogin from "@/hooks/useLogin";
import func from "../../../vue-temp/vue-editor-bridge";
//将uselogin 解构,取出数据
const {
    login_passWord,
    login_Name,
    handleLogin,
    userStore,
    register,
} =
    useLogin();
const userType = Number(userStore.usertype ?? 0);



</script>

<template>
    <div class="login-container">
        <div class="login-card">
            <el-card style="width: 500px">
                <template #header>
                    <div class="card-header">
                        <span>勤工俭学系统</span>
                    </div>
                </template>
                <div class="input-group">
                    <input type="text" v-model="login_Name" placeholder="请输入用户名" />
                </div>
                <div class="input-group">
                    <input type="password" v-model="login_passWord" placeholder="请输入密码" />
                </div>
                <template #footer>
                    <button @click="handleLogin()" class="login-btn">登录</button>
                    <button @click="register()" class="register-btn">注册</button>
                </template>
            </el-card>
        </div>
    </div>
</template>

<style scoped>
/* 登录框  */
.login-card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

/* 标题样式 */
h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 600;
}

/* 输入框组 */
.input-group {
    margin-bottom: 20px;
}


/* 注册按钮 */
.register-btn {
    width: 20%;
    padding: 12px;
    background-color: white;
    color: #409eff;
    border: 1px solid #409eff;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
    margin-left: 10px;
}

/* 注册按钮悬停效果 */
.register-btn:hover {
    background-color: #ecf5ff;
    transform: scale(1.05);
}



/* 输入框样式 */
input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* 输入框聚焦时 */
input:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}

/* 登录按钮 */
.login-btn {
    width: 20%;
    padding: 12px;
    background-color: #409eff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

/* 按钮悬停效果 */
.login-btn:hover {
    background-color: #66b1ff;
    transform: scale(1.05);
}

/* 在小屏幕上优化布局 */
@media screen and (max-width: 480px) {
    .login-box {
        padding: 30px 15px;
    }

    input,
    .login-btn {
        padding: 10px;
    }
}
</style>
